// 人员信息修改页
import React, { useEffect, useState } from 'react'
import { connect } from 'dva'
import Axios from 'axios'
import { Icon, Button, message } from 'antd'
import Findform from '../../lpz/findpeoplemsg/findForm.js'
import Findtable from '../../components/findTable.js'
import { delTableList } from '../../api/UserApi.js'
import './setpeople.css'

function Changepeople ({ initSetData, tableList, delList, ...rest }) {
  // 判断按钮是否loading的state
  let [loading, setLoading] = useState(false)
  // 判断当前点击的项，只执行当前点击的项
  let [btnkey, setbtnkey] = useState('')
  // 是否变为input进行修改
  let [isChange, setIschange] = useState(false)
  // 对数据进行操作加序号
  let newTableList = tableList?tableList.map((item, index) => {
    item['number'] = index + 1
    return item
  }):tableList
  // 输入框的列表
  const formColumns =
    // 筛选表单的数据
    [
      { ch_name: '单位名称', name: 'unit', type: 'select', option: ['盐田支公司', '龙岗支公司', '罗湖支公司', '车险营业部'] },
      { ch_name: '机构代码', name: 'institution', type: 'input' },
      { ch_name: '证件号', name: 'papersNum', type: 'input' },
      { ch_name: '姓名', name: 'name', type: 'input' },
      { ch_name: '人员代码', name: 'staffCode', type: 'input' },
      { ch_name: '用工形式', name: 'useForm', type: 'select', option: ['总地版员工', '派遣员工', '外包人员', '其他从业人员'] },
      { ch_name: '人员类别', name: 'peopleType', type: 'select', option: ['销售人员', '非销售人员'] },
      { ch_name: '是否转正', name: 'isFull', type: 'select', option: ['是', '否'] },
      { ch_name: '员工职务', name: 'duty', type: 'select', option: ['团队经理', '综合部经理'] },
      { ch_name: '岗位序列', name: 'sequence', type: 'select', option: ['运营支持类', '技术类', '销售类'] },
      { ch_name: '人员状态', name: 'state', type: 'select', option: ['在职', '离职', '退休', '调出', '长期病休', '外派'] },
      { ch_name: '归属部门', name: 'department', type: 'input', option: ['车行一部', '车行二部'] }
    ]
  // 按钮的列表
  const btnList = [
    { name: 'add', ch_name: '增加', type: 'button', color: '#02A7F0' },
    { name: 'search', ch_name: '查询', type: 'button', color: '#D9463F' }
  ]
  let columns = [
    {
      title: '序号',
      dataIndex: 'number',
      width: 60
    },
    {
      title: '机构代码',
      dataIndex: 'institution',
      editable: true,
      type: 'input',
      width: 80
    },
    {
      title: '单位名称',
      dataIndex: 'unit',
      editable: true,
      type: 'select',
      option: ['盐田支公司', '龙岗支公司', '罗湖支公司', '车险营业部'],
      width: 110
    },
    {
      title: '归属部门',
      dataIndex: 'department',
      editable: true,
      type: 'select',
      option: ['车行一部', '车行二部'],
      width: 95
    },
    {
      title: '人员代码',
      dataIndex: 'staffCode',
      editable: true,
      type: 'input',
      width: 100
    },
    {
      title: '证件号',
      dataIndex: 'papersNum',
      editable: true,
      type: 'input',
      width: 100
    },
    {
      title: '姓名',
      dataIndex: 'name',
      editable: true,
      type: 'input',
      width: 80
    },
    {
      title: '人员状态',
      dataIndex: 'state',
      editable: true,
      type: 'select',
      option: ['在职', '离职', '退休', '调出', '长期病休', '外派'],
      width: 80
    },
    {
      title: '用工形式',
      dataIndex: 'useForm',
      editable: true,
      type: 'select',
      option: ['总地版员工', '派遣员工', '外包人员', '其他从业人员'],
      width: 100
    },
    {
      title: '人员类别',
      dataIndex: 'peopleType',
      editable: true,
      type: 'select',
      option: ['销售人员', '非销售人员'],
      width: 120
    },
    {
      title: '员工职务',
      dataIndex: 'duty',
      editable: true,
      type: 'select',
      option: ['团队经理', '综合部经理'],
      width: 120
    },
    {
      title: '岗位序列',
      dataIndex: 'sequence',
      editable: true,
      type: 'select',
      option: ['运营支持类', '技术类', '销售类'],
      width: 120
    },
    {
      title: '是否转正',
      dataIndex: 'isFull',
      editable: true,
      type: 'select',
      option: ['是', '否'],
      width: 60
    },
    {
      title: '操作',
      dataIndex: 'handle',
      width: 100,
      fixed: 'right',
      render: (text, record, index) => {
        // 这个操作是为了只执行点击的那行
        const theKey = isEditing(index)
        return theKey ? (
          <div className='radios'>
              <Button type="primary">
                <Icon type="check" />
              </Button>
              <Button type="danger">
                <Icon type="close" />
              </Button>
          </div>
        ) : (
            <div className='radios'>
              <Button type="primary" onClick={() => {
                setbtnkey(index)
                setIschange(true)
              }}>
                <Icon type="edit" />
              </Button>
              {theKey ? <Button type="danger" loading={loading} onClick={() => { handle(index, record) }}>
                {loading ? null : <Icon type="rest" />}
              </Button> : <Button type="danger" onClick={() => { handle(index, record) }}>
                  <Icon type="rest" />
                </Button>}
            </div>
          )
      }
    }
  ]
  let isEditing = index => index === btnkey
  // 删除的处理函数
  let handle = (index, record) => {
    setbtnkey(index)
    setLoading(true)
    let obj = { id: record.id }
    delTableList(obj).then(res => {
      const { data } = res
      if (data.code === 0) {
        delList(data.data)
        message.success('删除成功')
        setLoading(false)
      }
    })
  }
  // 给columns更新点数据
  if (isChange) {
    columns = columns.map(col => {
      if (!col.editable) {
        return col
      }
      return {
        ...col,
        onCell: (record, rowIndex) => {
          return ({
            record,
            inputtype: col.type === 'input' ? 'text' : 'select',
            dataindex: col.dataIndex,
            option: col.option ? col.option : '',
            title: col.title,
            editing: isEditing(rowIndex),
          })
        }
      }
    })
  }
  useEffect(initSetData, [initSetData])
  return (
    <div className='setpeople'>
      <Findform seachLish={formColumns} btnList={btnList} required />
      <Findtable
        columns={columns}
        tableList={newTableList}
        length={tableList.length}
        Editable={isChange}
        id >

      </Findtable>
    </div>
  )
}
export default connect(
  (state) => {
    return {
      tableList: state.global.setPeopleData
    }
  },
  (dispatch) => ({
    initSetData () {
      Axios.get('/setPeople').then(response => {
        let { data } = response
        dispatch({
          type: 'global/initSetPeople',
          data
        })
      })
    },
    delList (data) {
      dispatch({
        type: 'global/delSetpeople',
        data
      })
    }
  })
)(Changepeople)
